<template>
  <div class="bookshelf">
    <!-- 头部 -->
    <header>
      <div class="h-left">
        <router-link to="/home"
          ><img src="../../assets/image/18721.png" style="width: 8px"
        /></router-link>
      </div>
      <div class="h-title">我的书架</div>
      <div class="h-right">
        <router-link
          to="/home"
          style="color: #999; font-size: 12px; width: 30px; margin-right: 10px"
          >首页</router-link
        >
      </div>
    </header>

    <!-- 未登录 -->
    <div class="weit-book">
      <div class="book-pope">
        <div class="book-img">
          <img src="../../assets/image/登录.png" alt="" />
        </div>
        <div class="book-not">
          <p>未登录</p>
          <span>登录账号同步书架</span>
        </div>
      </div>
      <div class="book-login">
        <router-link to="login" style="color: #fff">登录</router-link>

        <!-- <a href="../子页面/登录.html" style="color: #fff">登录</a> -->
      </div>
    </div>

    <!-- 阅读历史 -->
    <div class="history">
      <div class="catalog mar">
        <div class="active" data-tab="lastread">最近阅读</div>
        <div class="" data-tab="collect">收藏</div>
        <div class="" data-tab="buy">购买</div>
        <div class="" data-tab="follow">追书</div>
      </div>

      <div class="book_piece">
        <div class="no_yuedu">
          <img src="../../assets/image/阅读历史.png" height="83" />
        </div>
        <div class="cener_nr">
          <span class="nr-top">您还没有阅读历史</span><br />
          <span class="nr-bottom">最近阅读过的图书可以来这里继续阅读哦！</span>
        </div>
      </div>
    </div>
    <div class="m-search">
      <!-- 输入框 -->
      <div class="inp">
        <input type="text" placeholder="作者名/书名" />
      </div>
      <!-- 放大镜 -->
      <a href="./搜索页面.html"><div class="magnifier"></div></a>
    </div>
    <!-- 页脚 -->
    <footermodule></footermodule>
  </div>
</template>

<script>
import footermodule from "../../components/FooterModule.vue";
export default {
  components: {
    footermodule,
  },
};
</script>

<style lang="scss" scoped>
/* 未登录 */
.weit-book {
  background: #fff;
  padding: 15px 10px;
  position: relative;
}
.book-pope {
  display: flex;
}
.book-img {
  img {
    width: 60px;
    height: 60px;
    border-radius: 60px;
  }
}
.book-not {
  margin-left: 10px;
  & > p {
    font-size: 14px;
  }
  & > span {
    font-size: 12px;
    color: #9f9f9f;
  }
}
.book-login {
  position: absolute;
  right: 10px;
  top: 15px;
  font-size: 14px;
  text-align: center;
  color: #fff;
  font-family: "微软雅黑";
  width: 65px;
  height: 35px;
  border-radius: 5px;
  line-height: 35px;
  background-color: #d3270f;
}
/* 未登录 */

/* 阅读历史 */
.history {
  margin-top: 10px;
  background: #fff;
  padding-bottom: 1px;
  padding-top: 10px;
}
.mar {
  margin-left: 10px;
  margin-right: 10px;
}
.catalog {
  display: -webkit-box;
  height: 35px;
  border-left: 1px solid #b8b8b8;
  margin-bottom: 10px;
  border-top: 1px solid #b8b8b8;
  border-bottom: 1px solid #b8b8b8;
  margin-right: 20px;
  margin-left: 20px;
  background-color: #ededed;
  .active {
    color: #ff0020;
    background-color: #fff;
  }
  & > div {
    -webkit-box-flex: 1;
    text-align: center;
    font-size: 15px;
    color: #666666;
    line-height: 35px;
    border-right: 1px #b8b8b8 solid;
  }
}
.book_piece {
  margin: 0 5px;
  border-bottom: 1px solid #efefef;
  position: relative;
}
.no_yuedu {
  width: 44px;
  height: 58px;
  margin: 0 auto;
  padding-top: 10px;
  img {
    width: 44px;
    height: 58px;
  }
}
.cener_nr {
  text-align: center;
  margin-top: 10px;
  padding-bottom: 10px;
  line-height: 24px;
}
.nr-top {
  font-size: 15px;
}
.nr-bottom {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}
/* 阅读历史 */
</style>